<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram Redrawing</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // --- Style and Configuration ---
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        const origin = { x: 200, y: 270 };
        const axisLength = 70;

        // --- Helper function for drawing hatching lines ---
        function drawHatching(spacing) {
            // Set a thinner line width for the hatching
            ctx.lineWidth = 2;
            ctx.strokeStyle = 'black';
            ctx.beginPath();
            // Draw a set of parallel diagonal lines that cover the entire canvas
            // The clipping region will ensure they only appear inside the shape.
            for (let i = -canvas.height; i < canvas.width; i += spacing) {
                ctx.moveTo(i, 0);
                ctx.lineTo(i + canvas.height, canvas.height);
            }
            ctx.stroke();
        }

        // --- Define Conductor Paths ---
        function drawLeftConductorPath() {
            ctx.beginPath();
            ctx.moveTo(origin.x - 85, origin.y - 75);
            ctx.bezierCurveTo(origin.x - 100, origin.y - 120, origin.x - 40, origin.y - 130, origin.x - 30, origin.y - 90);
            ctx.bezierCurveTo(origin.x - 20, origin.y - 60, origin.x - 60, origin.y - 55, origin.x - 85, origin.y - 75);
            ctx.closePath();
        }

        function drawRightConductorPath() {
            ctx.beginPath();
            ctx.moveTo(origin.x + 40, origin.y - 130);
            ctx.bezierCurveTo(origin.x + 20, origin.y - 160, origin.x + 100, origin.y - 170, origin.x + 120, origin.y - 130);
            ctx.bezierCurveTo(origin.x + 140, origin.y - 100, origin.x + 70, origin.y - 80, origin.x + 40, origin.y - 130);
            ctx.closePath();
        }

        // --- Draw the Conductors (Outline and Hatching) ---
        ctx.lineWidth = 3; // Set a thick outline for the conductors

        // Draw Left Conductor
        ctx.save();
        drawLeftConductorPath();
        ctx.clip();
        drawHatching(10);
        ctx.restore();
        drawLeftConductorPath(); // Redraw path for stroking
        ctx.stroke();

        // Draw Right Conductor
        ctx.save();
        drawRightConductorPath();
        ctx.clip();
        drawHatching(11); // Slightly different spacing for a hand-drawn feel
        ctx.restore();
        drawRightConductorPath(); // Redraw path for stroking
        ctx.stroke();

        // --- Draw Coordinate System ---
        ctx.lineWidth = 2; // Set a standard line width for axes

        // Helper to draw an arrow
        function drawArrow(x1, y1, x2, y2) {
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();

            const angle = Math.atan2(y2 - y1, x2 - x1);
            const headlen = 10;
            ctx.beginPath();
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - headlen * Math.cos(angle - Math.PI / 6), y2 - headlen * Math.sin(angle - Math.PI / 6));
            ctx.lineTo(x2 - headlen * Math.cos(angle + Math.PI / 6), y2 - headlen * Math.sin(angle + Math.PI / 6));
            ctx.closePath();
            ctx.fill();
        }

        // Y-axis (up)
        drawArrow(origin.x, origin.y, origin.x, origin.y - axisLength);
        
        // X-axis (right)
        drawArrow(origin.x, origin.y, origin.x + axisLength, origin.y);

        // Z-axis (out of page)
        ctx.beginPath();
        ctx.arc(origin.x, origin.y, 8, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(origin.x, origin.y, 2.5, 0, 2 * Math.PI);
        ctx.fill();


        // --- Draw Labels ---
        ctx.font = 'italic 20px serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        // Axis labels
        ctx.fillText('y', origin.x - 15, origin.y - axisLength + 5);
        ctx.fillText('x', origin.x + axisLength + 5, origin.y + 15);
        ctx.fillText('z', origin.x - 20, origin.y);
        
        // Greek letters for permeability and permittivity
        ctx.textAlign = 'left';
        ctx.fillText('μ, ε', origin.x + 20, origin.y - 50);

        // Figure caption
        ctx.font = 'bold 20px serif';
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 4.18', canvas.width / 2, canvas.height - 30);

    </script>
</body>
</html>